<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Template • TodoMVC</title>
	<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	<!-- CSS overrides - remove if you don't need it -->
	<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section class="todoapp">
	<header class="header">
		<h1>todos</h1>
		<input class="new-todo" placeholder="What needs to be done?" autofocus v-model="newTodo" @keyup.enter="addTodo">
	</header>
	<!-- This section should be hidden by default and shown when there are todos -->
	<section class="main" v-if="todos.length > 0">
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<template v-for="todo in filterTodos">
				<li :key="todo.id"
					:class="{completed: todo.completed, editing: todo === editingTodo}">
					<div class="view">
						<input class="toggle" type="checkbox" v-model="todo.completed">
						<label @dblclick="editTodo(todo)">{{todo.content}}</label>
						<button class="destroy" @click="deleteTodo(todo)"></button>
					</div>
					<input class="edit"
						   v-model="editingContent"
						   v-todo-focus="todo === editingTodo"
						   @keyup.esc="cancelEdit"
						   @keyup.enter="saveEdit"
						   @blur="saveEdit">
				</li>
			</template>
		</ul>
	</section>
	<!-- This footer should be hidden by default and shown when there are todos -->
	<footer class="footer">
		<!-- This should be `0 items left` by default -->
		<span class="todo-count"><strong>{{remainings}}</strong> {{remainings == 1 ? "item" : "items"}} left</span>
		<!-- Remove this if you don't implement routing -->
		<ul class="filters">
			<li>
				<a :class="{selected: showType== 'all'}" @click="changeShowType('all')" href="#/">All</a>
			</li>
			<li>
				<a :class="{selected: showType== 'active'}" @click="changeShowType('active')" href="#/active">Active</a>
			</li>
			<li>
				<a :class="{selected: showType== 'completed'}" @click="changeShowType('completed')" href="#/completed">Completed</a>
			</li>
		</ul>
		<!-- Hidden if no completed items are left ↓ -->
		<button class="clear-completed" @click="deleteCompleted">Clear completed</button>
	</footer>
</section>
<footer class="info">
	<p>Double-click to edit a todo</p>
	<!-- Remove the below line ↓ -->
	<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
	<!-- Change this out with your name and url ↓ -->
	<p>Created by <a href="http://todomvc.com">you</a></p>
	<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script src="node_modules/todomvc-common/base.js"></script>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
</body>

<script>
	// 声明常量用于存储本地存储中保存事项的键
	const TODOS_KEY = 'todos_vue';
	// 声明对象统一保存本地存储的处理功能
	const todoStorage = {
		// 用于读取本地存储数据
		get() {
			return JSON.parse(localStorage.getItem(TODOS_KEY)) || [];
		},
		// 用于更新本地存储数据
		set(todos) {
			localStorage.setItem(TODOS_KEY, JSON.stringify(todos));
		}
	};

	const vm = new Vue({
		el: ".todoapp",
		data: {
			todos: todoStorage.get(),
			newTodo: "",
			editingTodo: null,
			editingContent: "",
			showType: "all", // options: all, active, completed
		},
		watch: {
			todos: {
				deep: true,
				handler: todoStorage.set,
			}
		},
		computed: {
			remainings() {
				return this.todos.filter(t => !t.completed).length;
			},
			allDone: {
				get() {
					return this.remainings === 0;
				},
				set(value) {
					this.todos.forEach(t => {
						t.completed = value;
					})
				}
			},
			filterTodos() {
				switch (this.showType) {
					case "active":
						return this.todos.filter(t => !t.completed);
					case "completed":
						return this.todos.filter(t => t.completed);
					default:
						return this.todos;
				}
			}
		},
		methods: {
			addTodo() {
				if (!this.newTodo) {
					return;
				}
				this.todos.push({
					id: this.todos.length,
					content: this.newTodo,
					completed: false,
				});
				this.newTodo = "";
			},
			deleteTodo(todo) {
				const index = this.todos.indexOf(todo);
				this.todos.splice(index, 1);
			},
			deleteCompleted() {
				this.todos = this.todos.filter(t => !t.completed);
			},
			editTodo(todo) {
				this.editingTodo = todo;
				this.editingContent = todo.content;
			},
			cancelEdit() {
				this.editingTodo = null;
				this.editingContent = "";
			},
			saveEdit() {
				if (!this.editingTodo) {
					return;
				}

				if (this.editingContent) {
					this.editingTodo.content = this.editingContent;
				} else {
					this.deleteTodo(this.editingTodo);
				}

				this.editingTodo = null;
				this.editingContent = "";
			},
			changeShowType(type) {
				this.showType = type;
			},
		},
		directives: {
			// 用于设置正在编辑的事项输入框获取焦点
			'todo-focus'(el, binding) {
				if (binding.value) {
					el.focus();
				}
			}
		}
	})
</script>
</html>
